<template>
	<view class="container">
		<view class="lottery-main-bg">
			<view class="lottery-grid">
				<template v-for="(item, index) in prizeList" :key="index">
					<view v-if="index===4" :class="[
					    'lottery-item',
					  ]">
						<text class="start-button" @click="play">{{goText || '抽奖'}}</text>
					</view>
					<!-- 中间的抽奖按钮改为普通格子 -->
					<view class="lottery-item">
						<view class="prize-content">
							<img :src="item.image" class="prize-image" mode="widthFix" />
							<text class="prize-name">{{ item.title }}</text>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ActLotteryWheel',
		props: {
			requiredPoints: {
				type: Number,
				default: 1
			},
			goText: {
				type: String,
				default: "抽奖"
			},
			prizeList: {
				type: Array,
				default: () => [{
						id: 1,
						title: 'iphoneX',
						image: 'https://img1.baidu.com/it/u=2992172568,3207584980&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1273'
					},
					{
						id: 2,
						title: '小米3',
						image: 'https://img.alicdn.com/bao/uploaded/i4/1714128138/O1CN015ZGeGj29zFfjpg41N_!!1714128138.jpg'
					},
					{
						id: 3,
						title: '记录仪',
						image: 'https://img.alicdn.com/bao/uploaded/i4/2631451752/O1CN01IyRW2w1OoSNvglF0E_!!2631451752.jpg'
					},
					{
						id: 4,
						title: '腾讯视频会员',
						image: 'https://img.alicdn.com/bao/uploaded/i4/2966815968/O1CN01DRE0eb1txOC21pZDc_!!0-item_pic.jpg'
					},
					{
						id: 5,
						title: '小米手环',
						image: 'https://img.alicdn.com/bao/uploaded/i1/1099051825/TB2gMRodgHqK1RjSZFEXXcGMXXa_!!1099051825.jpg'
					},
					{
						id: 6,
						title: '下次好运',
						image: 'https://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/phone-free.png',
						type: 'empty'
					},
					{
						id: 7,
						title: '台灯',
						image: 'https://img.alicdn.com/bao/uploaded/i3/2616970884/O1CN016tVSDi1IOubrk1Tjl_!!2616970884.jpg'
					},
					{
						id: 8,
						title: '谢谢参与',
						image: 'https://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/phone-free.png',
						type: 'empty'
					}
				]
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	/* 容器样式 */
	.container {
		width: 375px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 7.5px 0 7.5px 0;
	}

	/* 主背景 */
	.lottery-main-bg {
		width: 360px;
		border-radius: 5px;
		background-color: #FC5566;
		padding: 7.5px;
	}

	/* 九宫格容器 */
	.lottery-grid {
		width: 345px;
		height: 345px;
		background-color: #E81B54;
		border-radius: 5px;
		padding: 7.5px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* 单个格子 */
	.lottery-item {
		width: 95px;
		height: 95px;
		background: white;
		margin: 2.5px;
		border-radius: 3px;
		border: 4px solid white;
	}

	/* 奖品内容 */
	.prize-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* 奖品图片 */
	.prize-image {
		width: 50px;
		height: 50px;
		margin: 4px auto;
	}

	/* 奖品文字 */
	.prize-name {
		font-size: 11px;
		color: #AB6120;
		text-align: center;
		line-height: 20px;
	}

	.start-button {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25px;
		color: #AB6120;
		background-color: #FFB001;
		font-weight: bold;
	}
</style>
